<template>
  <div class="page-box">
    <ContentWrap>
      <el-form ref="formRef" v-loading="formLoading" :model="formData" label-width="200">
        <div>
          <div class="title">企业基本信息:</div>
          <el-row>
            <el-col :span="8">
              <el-form-item label="企业名称：">
                <el-tooltip effect="dark" :content="formData?.companyName">
                  <div class="self-ellipsis self-max-width-200">
                    {{ formData?.companyName }}
                  </div>
                </el-tooltip>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="统一社会信用代码：">
                <el-tooltip effect="dark" :content="formData?.socialCreditCode">
                  <div class="self-ellipsis self-max-width-200">
                    {{ formData?.socialCreditCode }}
                  </div>
                </el-tooltip>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="法定代表人：">
                <el-tooltip effect="dark" :content="formData?.legalPerson">
                  <div class="self-ellipsis self-max-width-200">
                    {{ formData?.legalPerson }}
                  </div>
                </el-tooltip>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="法人身份证号：">
                <el-tooltip effect="dark" :content="formData?.legalPersonId">
                  <div class="self-ellipsis self-max-width-200">
                    {{ formData?.legalPersonId }}
                  </div>
                </el-tooltip>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="开户银行：">
                <el-tooltip effect="dark" :content="formData?.depositBank">
                  <div class="self-ellipsis self-max-width-200">
                    {{ formData?.depositBank }}
                  </div>
                </el-tooltip>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="银行账号：">
                <el-tooltip effect="dark" :content="formData?.bankAccount">
                  <div class="self-ellipsis self-max-width-200">
                    {{ formData?.bankAccount }}
                  </div>
                </el-tooltip>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="注册地址：">
                <el-tooltip effect="dark" :content="formData?.detailAddress">
                  <div class="self-ellipsis self-max-width-500">
                    {{ formData?.detailAddress }}
                  </div>
                </el-tooltip>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <div>
          <div class="title">联系人:</div>
          <el-row>
            <el-col :span="8">
              <el-form-item label="联系人：">
                <el-tooltip effect="dark" :content="formData?.contactPerson">
                  <div class="self-ellipsis self-max-width-200">
                    {{ formData?.contactPerson }}
                  </div>
                </el-tooltip>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="身份证号：">
                <el-tooltip effect="dark" :content="formData?.contactId">
                  <div class="self-ellipsis self-max-width-200">
                    {{ formData?.contactId }}
                  </div>
                </el-tooltip>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="联系人电话：">
                <el-tooltip effect="dark" :content="formData?.contactPhone">
                  <div class="self-ellipsis self-max-width-200">
                    {{ formData?.contactPhone }}
                  </div>
                </el-tooltip>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="登录账号：">
                <el-tooltip effect="dark" :content="formData?.userAccount">
                  <div class="self-ellipsis self-max-width-200">
                    {{ formData?.userAccount }}
                  </div>
                </el-tooltip>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <div>
          <div class="title">附件信息:</div>
          <el-row>
            <el-col :span="8">
              <el-form-item label="营业执照：">
                <el-image
                  v-if="formData?.businessLicense?.url"
                  style="width: 200px; height: 200px"
                  :src="formData?.businessLicense?.url"
                  :zoom-rate="1.2"
                  :max-scale="7"
                  :min-scale="0.2"
                  :preview-src-list="[formData?.businessLicense?.url]"
                  fit="cover"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="法人身份证（正）：">
                <el-image
                  v-if="formData?.frontLegalPersonId?.url"
                  style="width: 200px; height: 200px"
                  :src="formData?.frontLegalPersonId?.url"
                  :zoom-rate="1.2"
                  :max-scale="7"
                  :min-scale="0.2"
                  :preview-src-list="[formData?.frontLegalPersonId?.url]"
                  fit="cover"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="法人身份证（反）：">
                <el-image
                  v-if="formData?.backLegalPersonId?.url"
                  style="width: 200px; height: 200px"
                  :src="formData?.backLegalPersonId?.url"
                  :zoom-rate="1.2"
                  :max-scale="7"
                  :min-scale="0.2"
                  :preview-src-list="[formData?.backLegalPersonId?.url]"
                  fit="cover"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="委托书：">
                <el-image
                  v-if="formData?.powerAttorney?.url"
                  style="width: 200px; height: 200px"
                  :src="formData?.powerAttorney?.url"
                  :zoom-rate="1.2"
                  :max-scale="7"
                  :min-scale="0.2"
                  :preview-src-list="[formData?.powerAttorney?.url]"
                  fit="cover"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="联系人身份证（正）：">
                <el-image
                  v-if="formData?.frontContactPersonId?.url"
                  style="width: 200px; height: 200px"
                  :src="formData?.frontContactPersonId?.url"
                  :zoom-rate="1.2"
                  :max-scale="7"
                  :min-scale="0.2"
                  :preview-src-list="[formData?.frontContactPersonId?.url]"
                  fit="cover"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="联系人身份证（反）：">
                <el-image
                  v-if="formData?.backContactPersonId?.url"
                  style="width: 200px; height: 200px"
                  :src="formData?.backContactPersonId?.url"
                  :zoom-rate="1.2"
                  :max-scale="7"
                  :min-scale="0.2"
                  :preview-src-list="[formData?.backContactPersonId?.url]"
                  fit="cover"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <div>
          <div class="title">合同上传:</div>
          <el-row>
            <el-col :span="24">
              <div v-if="formData?.contractFiles?.length">
                <el-image
                  v-for="item in formData?.contractFiles || []"
                  style="width: 200px; height: 200px"
                  :src="item.url"
                  :zoom-rate="1.2"
                  :max-scale="7"
                  :min-scale="0.2"
                  :preview-src-list="[item.url]"
                  fit="cover"
                  class="contractFiles"
                />
              </div>
            </el-col>
          </el-row>
        </div>
        <div>
          <div class="title">状态信息:</div>
          <el-table
            :data="formData?.list || []"
            border
            stripe
            :header-cell-style="{ background: '#F3F4F7', color: '#555' }"
          >
            <el-table-column label="类型" align="center" prop="type" />
            <el-table-column label="状态" align="center" prop="status"> </el-table-column>
          </el-table>
        </div>
      </el-form>
    </ContentWrap>
  </div>
</template>
<script lang="ts" setup name="customerManage">
import * as Utils from '@/utils/dict'
import * as customer from '@/api/customer'

const { DICT_TYPE, getDictLabel } = reactive(Utils)
const formLoading = ref(false)
const formRef = ref()

const formData: Record<string, any> = ref({})

const getInfoById = async () => {
  formLoading.value = true
  try {
    const data = await customer.getByCustomerId()
    if (data) {
      formData.value = data
      formData.value.list = [
        {
          type: '客户状态',
          status: getDictLabel(DICT_TYPE.BID_CUSTOMER_STATE, formData.value.state?.toString())
        },
        {
          type: '竞拍权限',
          status: getDictLabel(DICT_TYPE.BID_CUSTOMER_BID, formData.value.biddingState?.toString())
        }
      ]
    }
  } finally {
    formLoading.value = false
  }
}

onMounted(() => {
  getInfoById()
})
</script>
<style lang="scss" scoped>
.page-box {
  padding: 0 200px;
  height: 100%;
  overflow-y: auto;

  .title {
    font-weight: bold;
    margin-bottom: 20px;
  }
}

:deep(.el-form-item__content) {
  width: 100% !important;
}

.contractFiles.el-image {
  margin: 0 0 20px 206px;
}
</style>
